<template>
    <h1 v-if="movieInfo">
        {{ movieInfo?.title }}
    </h1>
    <div><img  :src="movieInfo?.picPaths" lazy="loaded"></div>
    <div>上架时间：{{movieInfo?.addedTime ?? '未知'}}</div>
    <div>主演：{{ movieInfo?.actors }}元</div>
    <h2>影片介绍</h2>
    <div v-html="movieInfo?.desc ?? ''"></div>
    <!--添加一个回复的表单-->

    <div>
        <el-form>
            <el-form-item label="发表评价">
                <textarea v-model="replyContent" placeholder="请输入回复内容..."></textarea>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addReply">提交</el-button>
            </el-form-item>
        </el-form>
    </div>


    <ul>
        <li v-for="item in comments">

          评价：  {{ item.body }}
        </li>
    </ul>

</template>

<script setup lang="ts">
import { getSingle, add,getList,TableName } from '../utils/request'
import { ref,onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '../stores/user';
import { ElMessageBox } from 'element-plus';

const userStore = useUserStore();

const user = ref(userStore.getUser)
// 定义文章信息的接口
interface Movie {
  title?: string;
  addedTime?: string;
  picPaths?: string;
  desc?: string;
}

const comments=ref([])
const route = useRoute()
// 声明articleInfo的类型为Article
const movieInfo= ref<Movie | null>(null)
// 定义回复内容的响应式属性
const replyContent = ref<string>('')

onMounted(async () => {
  const res = await getSingle(route.query.id,TableName.Movies)
  
    movieInfo.value = res

    comments.value = await getList(TableName.Comments,route.query.id,'电影')
})

// 添加回复的方法
const addReply = async () => {
  // 这里可以添加提交回复的逻辑
    if (user.value && user.value.id) {
        console.log('提交回复:', replyContent.value)
        // 可以在这里添加API调用代码来保存回复
        await add({
            articleid: route.query.id,
            body: replyContent.value,
            userid: user.value.id,
            replyType: '电影',
            typeIndex: TableName.Comments
        })
        // 之后应该清空输入框
        replyContent.value = ''

    } else {
        ElMessageBox.alert('请先登录', '提示').then(() => {
            // on confirm
        }).catch(() => {
            // on cancel
        });
    }

}
</script>

<style scoped>

</style>